<template>
  <div class="approval-page">
    <!-- 左侧信息列 -->
    <div class="left-column">
      <!-- 基本信息卡片 -->
      <!-- 基本信息卡片 -->
      <div class="info-card">
        <h3 class="card-title">基本信息</h3>
        <ul class="info-list">
          <li>
            <span class="label">单据编号</span>
            <span class="value">{{ info.checkoutNo }}</span>
          </li>
          <li>
            <span class="label">老人姓名</span>
            <span class="value">{{ info.name }}</span>
          </li>
          <li>
            <span class="label">老人身份证号</span>
            <span class="value">{{ info.idCardNo }}</span>
          </li>
          <li>
            <span class="label">联系方式</span>
            <span class="value">{{ info.contact }}</span>
          </li>
          <li>
            <span class="label">费用期限</span>
            <span class="value">{{ info.stayStart.slice(0,10) }} —— {{info.stayEnd.slice(0,10) }}</span>
          </li>
          <li>
            <span class="label">护理等级</span>
            <span class="value">{{ info.careLevel }}</span>
          </li>
          <li>
            <span class="label">入住床位</span>
            <span class="value">{{ info.bedNo }}</span>
          </li>
          <li>
            <span class="label">签约合同</span>
            <span class="value">{{ info.name+"的入住合同" }}.pdf <a :href="info.contractUrl"   target="_blank" class="view-link">查看</a></span>
          </li>
          <li>
            <span class="label">养老顾问</span>
            <span class="value">{{ info.consultant }}</span>
          </li>
          <li>
            <span class="label">护理员</span>
            <span class="value">{{ info.caregiverName }}</span>
          </li>
        </ul>
      </div>

      <!-- 申请信息卡片 -->
      <!-- 申请信息卡片 -->
      <div class="info-card" style="margin-top: 20px;">
        <h3 class="card-title">申请信息</h3>
        <ul class="info-list">
          <li>
            <span class="label">退住日期</span>
            <span class="value">{{ info.checkoutTime }}</span>
          </li>
          <li>
            <span class="label">退住原因</span>
            <span class="value">{{ info.checkoutReason }}</span>
          </li>
          <li>
            <span class="label">备注</span>
            <span class="value">{{ info.remark }}</span>
          </li>
          <li>
            <span class="label">申请人</span>
            <span class="value">{{ info.applicant }}</span>
          </li>
          <li>
            <span class="label">申请时间</span>
            <span class="value">{{formatDateStr(info.applyTime)  }}</span>
          </li>
        </ul>
      </div>

      <!-- 新增：上传解除协议卡片 -->
      <div class="info-card" style="margin-top: 20px;">
        <h3 class="card-title">上传解除协议</h3>
        <ul class="info-list">
          <li>
            <span class="label">合同编号</span>
            <span class="value">{{ info.contractNo }}</span>
          </li>
          <li>
            <span class="label">*解除日期</span>
            <span v-if="isTi" class="value">
          <el-date-picker
              v-model="releaseDate"
              type="date"
              placeholder="选择解除日期"
              style="width: 200px;"
          ></el-date-picker>
            </span>
            <span v-if="!isTi" class="value">{{ info.contract?.terminateTime }}</span>
          </li>
          <li>
            <span class="label">*解除协议</span>
            <span v-if="isTi" class="value">
          <el-upload
              action="/dev-api/check/checkout/uploadContract"
              :file-list="fileList"
              name="file"
              :data="{ contractNo: info.contractNo }"
              accept=".pdf"
              :before-upload="beforeUpload"
              :on-success="handleUploadSuccess"
              :on-error="handleUploadError"
              :headers="Headers"
          >


  <el-button size="small" type="primary">上传文件</el-button>
  <div slot="tip" class="el-upload__tip">请上传pdf文件，大小在60M以内</div>
          </el-upload>
        </span>
            <span v-if="!isTi" class="value">
              {{ info.name }}入住合同的解除协议.pdf
              <a
                  v-if="info.contract?.terminateAgreementUrl"
                  :href="info.contract.terminateAgreementUrl"
                  class="view-link"
                  target="_blank"
              >
                查看
              </a>
            </span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 右侧操作记录列 -->
<!--    <div class="right-column">-->
<!--      &lt;!&ndash; 操作记录卡片 &ndash;&gt;-->
<!--      <div v-if="users.appUser" class="record-card">-->
<!--        <h3 class="card-title">操作记录</h3>-->
<!--        <ul class="record-list">-->
<!--          <li class="record-item">-->
<!--            <div class="item-icon">-->
<!--              &lt;!&ndash; 替换为“发起申请”图标 &ndash;&gt;-->
<!--              <img src="@/assets/images/avatar.jpg" alt="发起申请" />-->
<!--            </div>-->
<!--            <div class="item-content">-->
<!--              <div class="item-desc">发起申请-申请退住</div>-->
<!--              <div class="item-status"> {{users.appUser.nickName}} （已发起）</div>-->
<!--            </div>-->
<!--            <div class="item-time">{{formatDateStr(users.appTask.startTime)}}</div>-->
<!--          </li>-->
<!--          <li class="record-item">-->
<!--            <div class="item-icon">-->
<!--              &lt;!&ndash; 替换为“审批通过”图标 &ndash;&gt;-->
<!--              <img src="@/assets/images/avatar.jpg" alt="审批通过" />-->
<!--            </div>-->
<!--            <div class="item-content">-->
<!--              <div class="item-desc">（{{ users.checkUser.roles[0].roleName }}）审批-申请审批</div>-->
<!--              <div class="item-status">{{users.checkUser.nickName}}（已通过）</div>-->
<!--              &lt;!&ndash; 审批意见提示框 &ndash;&gt;-->
<!--              <div class="approval-opinion">{{users.comment.messageParts[0]}}</div>-->

<!--            </div>-->

<!--            <div class="item-time">{{formatDateStr(users.appTask.endTime)}}</div>-->

<!--          </li>-->

<!--        </ul>-->
<!--      </div>-->
<!--    </div>-->
    <!-- 右侧操作记录列 -->
    <div class="right-column">
      <!-- 操作记录卡片 -->
      <div v-if="log.activities" class="record-card">
        <h3 class="card-title">操作记录</h3>
        <ul class="record-list">
          <li v-for="item in log.activities" class="record-item">
            <div class="item-icon">
              <!-- 替换为“发起申请”图标 -->
              <img src="@/assets/images/avatar.jpg" alt="发起申请" />
            </div>
            <div class="item-content">
              <div class="item-desc">({{ log[item.assignee]?.remark }}){{item.name}}</div>
              <div class="item-status"> {{ log[item.assignee]?.nickName }} ({{item.endTime ? "已处理":"待处理"}})</div>
              <div v-if="log[item.id] " class="approval-opinion">{{log[item.id].fullMessage}}</div>
            </div>
            <div class="item-time">{{item.endTime ? formatDateStr(item.endTime):""}}</div>
          </li>
<!--          <li class="record-item">-->
<!--            <div class="item-icon">-->
<!--              &lt;!&ndash; 替换为“审批通过”图标 &ndash;&gt;-->
<!--              <img src="@/assets/images/avatar.jpg" alt="审批通过" />-->
<!--            </div>-->
<!--            <div class="item-content">-->
<!--              <div class="item-desc">（{{ users.checkUser.roles[0].roleName }}）审批-申请审批</div>-->
<!--              <div class="item-status">{{users.checkUser.nickName}}（已通过）</div>-->
<!--              &lt;!&ndash; 审批意见提示框 &ndash;&gt;-->
<!--              <div class="approval-opinion">{{users.comment.messageParts[0]}}</div>-->

<!--            </div>-->

<!--            <div class="item-time">{{formatDateStr(users.appTask.endTime)}}</div>-->

<!--          </li>-->

        </ul>
      </div>
    </div>
    <!-- 底部返回按钮 -->
    <div class="btn-area">
      <el-button  type="default" @click="goBack">返回</el-button>
      <el-button v-if="isTi" type="primary" @click="handleSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
import {checkOutDto, getActivityLog, getActivityUser, getCheckout, removeContract} from "@/api/check/checkout.js"
import { getToken } from "@/utils/auth";
import {ElMessage} from "element-plus";
export default {
  name: "ApprovalPage",

  data() {
    return {
      isTi: true,
      releaseDate: '', // 初始解除日期
      fileList: [],
      Headers: { Authorization: "Bearer " + getToken() },
      info: {
        id: "",                 // 主键（新增时可为空）
        checkoutNo: "",         // 退住编号
        title: "",              // 标题
        elderId: "",            // 老人ID
        businessId: "",         // 业务ID（流程实例ID，可为空）
        name: "",               // 姓名
        idCardNo: "",           // 身份证号
        contact: "",            // 联系方式
        stayStart: "",          // 入住开始时间（如 "2024-05-01"）
        stayEnd: "",            // 入住结束时间（如 "2025-10-01"）
        careLevel: "",          // 护理等级（如 "一级护理"）
        bedNo: "",              // 入住床位号
        contractUrl: "",        // 签约合同URL
        contractNo: "",         // 合同编号
        consultant: "",         // 养老顾问
        caregiverName: "",      // 护理员名称
        checkoutTime: "",       // 退住时间（如 "2025-10-15"）
        checkoutReason: "",     // 退住原因
        applicant: "",          // 申请人姓名
        applicantId: "",        // 申请人ID
        applicantDept: "",      // 申请人部门编号
        applyTime: "",          // 申请时间（如 "2025-10-15T10:30:00"）
        createdAt: "",          // 创建时间（自动生成可为空）
        updatedAt: "",
        processStatus: '',// 更新时间（自动生成可为空）
        remark:""
      },
      users:{},
      fileUrl:"",
      log:{},
    };
  },
  methods: {
    goBack() {
      this.$router.push("/CollaborationWork/tasking"); // 路由回退
    },
    // 上传前校验：仅允许PDF且≤60M
    beforeUpload(file) {
      const isPdf = file.type === 'application/pdf';
      const isLt60M = file.size / 1024 / 1024 < 60;
      if (!isPdf) {
        ElMessage.error('请上传PDF格式的文件');
      }
      if (!isLt60M) {
        ElMessage.error('文件大小不能超过60MB');
      }
      return isPdf && isLt60M;
    },
    handleUploadSuccess(response, file, fileList) {
      if (response.code === 200) {
        // 若依默认返回格式：{ code: 200, msg: "上传成功", fileName: "...", url: "..." }
        this.fileUrl = response.msg
      } else {
        ElMessage.error(response.msg || '文件上传失败')
      }
    },
    // 上传失败回调
    handleUploadError(err, file, fileList) {
      console.error('上传出错:', err)

    },

    formatDateStr(dateStr) {
      // 1. 基础校验：判断是否为有效字符串且包含关键符号
      if (!dateStr || typeof dateStr !== 'string' || !dateStr.includes('T')) {
        console.warn('输入不是有效的日期格式（需包含"T"，如2025-10-23T10:42:42.000+08:00）');
        return '';
      }

      // 2. 截取核心部分：年月日（T之前） + 时分秒（T之后、.之前）
      // 例："2025-10-23T10:42:42.000+08:00" → 拆分为 ["2025-10-23", "10:42:42.000+08:00"]
      const datePart = dateStr.split('T')[0]; // 取"T"前的年月日："2025-10-23"
      const timePart = dateStr.split('T')[1].split('.')[0]; // 取"T"后、"."前的时分秒："10:42:42"

      // 3. 重组为 "年月日 时分秒" 格式
      return `${datePart} ${timePart}`;
    },

    formatToYmd (date) {
        // 第一步：将输入转换为 Date 对象（如果是字符串）
        let dateObj;
        if (date instanceof Date) {
          dateObj = date; // 本身是 Date 对象，直接使用
        } else if (typeof date === 'string') {
          dateObj = new Date(date); // 字符串尝试转换为 Date 对象
        } else {
          console.warn('输入不是有效的日期类型');
          return '';
        }

        // 第二步：验证 Date 对象是否有效
        if (isNaN(dateObj.getTime())) {
          console.warn('无法解析的日期：', date);
          return '';
        }

        // 第三步：提取年、月、日（月份是 0 开始，需 +1）
        const year = dateObj.getFullYear();
        const month = dateObj.getMonth() + 1; // 1-12
        const day = dateObj.getDate(); // 1-31

        // 第四步：补零（确保月份和日期是两位数，如 9 → "09"）
        const padZero = (num) => num.toString().padStart(2, '0');
        const monthStr = padZero(month);
        const dayStr = padZero(day);

        // 第五步：拼接为目标格式
        return `${year}-${monthStr}-${dayStr}`;
    },
    handleSubmit() {
      console.log(this.releaseDate)
      if (!this.fileUrl) {
        this.$message.error("请先上传解除协议PDF！");
        return;
      }
      if (!this.releaseDate) {
        this.$message.error("请选择解除日期！");
        return;
      }
      const payload = {
        id: this.info.id,
        fileUrl: this.fileUrl,
        removeData: this.formatToYmd(this.releaseDate),
      };
      removeContract(payload).then(
          res => {
            if (res.code === 200) {
              checkOutDto(this.id).then(res =>{
                this.info = res.data
                if(this.info.processStatus>2){
                  this.isTi=false
                }
              })
              getActivityLog(this.id).then( res=>{
                this.log = res.data
                this.log.activities=res.data.activities.reverse()
                console.log(res)
              })
              this.$message.success("退住申请提交成功！");
              this.isTi=false
            } else {
              this.$message.error(res.msg);
            }
          }
      )

      // 这里编写“提交”的业务逻辑（如表单验证、调用接口等）
      console.log("执行提交操作");
    },
  },
  mounted() {
    // 获取退住信息

    checkOutDto(this.id).then(res =>{
      this.info = res.data
      if(this.info.processStatus>2){
        this.isTi=false
      }
    })


    getActivityLog(this.id).then( res=>{
      this.log = res.data
      this.log.activities=res.data.activities.reverse()
      console.log(res)
    })
  },
  props: {
    id: {
      type: [Number,String],
      default: 0,
    },
  },
};
</script>

<style scoped>
.approval-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
}

.left-column {
  width: 60%;
}

.right-column {
  width: 38%;
}

.info-card,
.record-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
}

.card-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.info-list {
  list-style: none;
  padding: 0;
}

/* 标签右对齐样式 */
.info-list li {
  display: flex;
  margin-bottom: 15px;
}

.info-list .label {
  width: 120px;
  text-align: right;
  margin-right: 15px;
  color: #606266;
}

.info-list .value {
  flex: 1;
}

.view-link {
  color: #409eff;
  text-decoration: none;
  margin-left: 5px;
}

/* 操作记录核心样式（流程线 + 布局） */
.record-list {
  list-style: none;
  padding: 0;
  position: relative; /* 作为伪元素的定位容器 */
}

.record-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}
.record-item:last-child {
  margin-bottom: 0;
}

/* 垂直主线：连接所有记录项（除第一个），从头像中间穿过 */
.record-item:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 20px; /* 与40px宽图标中心对齐（40/2=20） */
  top: 41px;
  height: 30px;
  width: 2px;
  background-color: #dcdcdc; /* 浅灰色流程线 */
}

.item-icon {
  margin-right: 12px;
}

.item-icon img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.item-content {
  flex: 1;
}

.item-desc {
  font-weight: 500;
}

.item-status {
  color: #909399;
  font-size: 12px;
}

/* 审批意见提示框 */
.approval-opinion {
  background-color: #f5f7fa;
  border: 2px solid #000000;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
  margin-top: 5px;
  font-size: 12px;
  color: #606266;
}

.item-time {
  color: #909399;
  font-size: 12px;
  white-space: nowrap; /* 防止时间换行 */
}

/* 底部按钮 */
.btn-area {
  margin-top: 40px;
  text-align: center;
  width: 100%;
}

.btn-area button {
  margin: 0 20px;
}
.el-upload{
  display: block;
  margin-left: 10px;
}
</style>